<template>
  <div style="width: 60%; margin: 20px auto">
    <div style="font-size: 20px">我的收藏夹</div>
    <div style="margin-top: 20px">
      <el-button :type="checkType('SONG')" @click="changeType('SONG')">歌曲</el-button>
      <el-button :type="checkType('ALBUM')" @click="changeType('ALBUM')">专辑</el-button>
      <el-button :type="checkType('SINGER')" @click="changeType('SINGER')">歌手</el-button>
      <el-button :type="checkType('PLAYLIST')" @click="changeType('PLAYLIST')">歌单</el-button>
    </div>
    <div style="margin-top: 30px">
      <SongCollect v-if="data.type === 'SONG'"></SongCollect>
      <AlbumCollect v-if="data.type === 'ALBUM'"></AlbumCollect>
      <SingerCollect v-if="data.type === 'SINGER'"></SingerCollect>
      <PlaylistCollect v-if="data.type === 'PLAYLIST'"></PlaylistCollect>
    </div>
  </div>
</template>
<script setup>
import {reactive} from "vue";
import AlbumCollect from "@/views/components/AlbumCollect.vue";
import SingerCollect from "@/views/components/SingerCollect.vue";
import SongCollect from "@/views/components/SongCollect.vue";
import PlaylistCollect from "@/views/components/PlaylistCollect.vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  type: 'SONG'
})

const checkType = (type) => {
  return data.type === type? 'primary' : ''
}

const changeType = (type) => {
  data.type = type
}
</script>
